<template>
	<div>
		<div ref="div" class="wirte" contenteditable @blur="onblur">
			<p>自建富文本</p>
		</div>
		<!-- tool -->
		<ant-Button type="primary" @click="getRefMess">获取信息</ant-Button>
		<ant-Button type="primary" @click="backHistroy">返回主页</ant-Button>
		<p><ant-Button v-for="(item, index) in toolArr" :key="item.id" type="dashed">{{ item.value }}</ant-Button></p>
	</div>
</template>
<script lang="js">
import { Component, Vue } from 'vue-property-decorator';
import { Button, Input, Icon,ButtonGroup } from 'ant-design-vue';
import toolArrJson from "./tool.json";
@Component({
	components:{
		'ant-Button': Button,
		'ant-Input': Input,
		'ant-Icon': Icon
	}
})
export default class MyEC extends Vue {
	toolArr = toolArrJson
	mounted(){
		console.log(Object.prototype.toString.call(this.toolArr),this.toolArr,'objType');
		var editor = this.$refs.div;
		// 自动获取焦点
		editor.onfocus = function () {
			window.setTimeout(function () {
				var sel, range;
				if (window.getSelection && document.createRange) {
					range = document.createRange();
					range.selectNodeContents(editor);
					range.collapse(true);
					range.setEnd(editor, editor.childNodes.length);
					range.setStart(editor, editor.childNodes.length);
					sel = window.getSelection();
					sel.removeAllRanges();
					sel.addRange(range);
				} else if (document.body.createTextRange) {
					range = document.body.createTextRange();
					range.moveToElementText(editor);
					range.collapse(true);
					range.select();
				}
			}, 0);
		};
		editor.focus();
		window.clearTimeout();
	}
		onblur() {
			// if (this.$refs.div.firstChild.nodeType!= 1) {
			// 	let copyNodeTree = this.$refs.div.childNodes[0].cloneNode(true);
			// 	let firstDivNodeTree = document.createElement('div');
			// 	firstDivNodeTree.appendChild(copyNodeTree);
			// 	this.$refs.div.replaceChild(firstDivNodeTree, this.$refs.div.childNodes[0]);
			// }
			let nodelistToArray = [].slice.apply(this.$refs.div.childNodes),
				brArray = [];
			console.log(nodelistToArray);
		}
		getRefMess(){
			let _const = this;
			console.log(_const.$refs.div.innerHTML);
		}
		backHistroy(){
			let _const = this;
			_const.$router.push({
				path:"/"
			})
		}
}
</script>
<style lang="scss">
.wirte {
	height: 300px;
	border: 1px solid red;
}
</style>
